<template>
  <div class="content group-list">
    <div class="search-content">
      <el-form ref="searchForm" :inline="true" :model="searchObj">
        <el-form-item label="用户名：" prop="admin_name">
          <el-input v-model="searchObj.admin_name" placeholder="请输入用户名" class="input w200" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属集团：" prop="depart_id">
          <el-select v-model="searchObj.depart_id" clearable placeholder="请选择所属集团">
            <el-option
              v-for="item in groupList"
              :key="item.value"
              :label="item.depart_name"
              :value="item.depart_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="agentList search-list" style="width:100%;">
      <el-table
        :data="aList"
        border
        style="width: 100%"
        ref="table"
        :height="oHeight"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
      >
        <el-table-column fixed prop="admin_id" label="ID" key="admin_id" width="150"></el-table-column>
        <el-table-column
          prop="admin_name"
          label="用户名"
          key="admin_name"
          :show-overflow-tooltip="true"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="first_depart_name"
          label="所属集团"
          key="admin_is_super"
          :show-overflow-tooltip="true"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="admin_login_time"
          label="最近登录"
          key="admin_login_time"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column fixed="right" align="center" label="操作" key="operate" width="160">
          <template slot-scope="scope">
            <el-button
              class="operateBtn"
              type="text"
              @click="edit(scope.row.admin_id, scope.row.admin_name)"
            >编辑</el-button>
            <el-button
              class="operateBtn"
              type="text"
              @click="deleter(scope.row.admin_id, scope.row.depart_id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <!-- <pagination
        :arr="aList"
        :total="total"
        :currentPage="currentPage"
        :handleSizeChange="handleSizeChange"
        :handleCurrentChange="handleCurrentChange"
      ></pagination>-->
    </div>
    <!--编辑管理员-->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible" class="admin-control-edit">
      <el-form :model="form" label-position="left" :rules="rules" ref="ruleForm">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="admin_name">
          <el-input v-model.trim="form.admin_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="admin_password">
          <el-input v-model.trim="form.admin_password" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth" prop="again_password">
          <el-input v-model.trim="form.again_password" autocomplete="off" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editAdmin">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/pagination/pagination.vue";
import { resize } from "@/common/js/height.js";
export default {
  name: "group-list",
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.admin_password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      aList: [],
      groupList: [],
      oHeight: 800,
      total: 1,
      currentPage: 1,
      searchObj: {
        //该变量定义查询传参
        pageSize: 10,
        page: 1,
        admin_name: "",
        depart_id: ""
      },
      drawer: false, //侧边窗口控制弹出
      permissionList: [], //权限列表
      form: {
        //添加管理员表单
        admin_name: "",
        admin_password: "",
        admin_id: "",
        again_password: ""
      },
      dialogFormVisible: false,
      formLabelWidth: "80px",
      rules: {
        admin_name: {
          required: true,
          message: "请填写用户名",
          trigger: "blur"
        },
        admin_password: {
          required: true,
          message: "请填写密码",
          trigger: "blur"
        },
        again_password: {
          required: true,
          validator: validatePass2,
          trigger: "blur"
        }
      },
      // 编辑权限传的参数
      permissonOp: {
        admin_id: "",
        menus: []
      },
      admin_id: "" //点击编辑时获取到的管理员id
    };
  },
  props: ["changed"], //父子组件传值---添加管理员
  watch: {
    changed(n, o) {
      this.searchObj.page = 1;
      this.currentPage = 1;
      this.searchObj.admin_name = "";
      this.getList();
    }
  },
  components: {
    pagination
  },
  methods: {
    // 获取列表
    getList() {
      var that = this;
      this.searchObj.curpage = that.currentPage;
      this.$http
        .post(
          "/admin/depart/index.php?act=departManage&op=adminList",
          this.searchObj
        )
        .then(
          res => {
            if (res.code == 1) {
              this.aList = res.data.list;
              this.aList.map((value, index) => {
                if (value.admin_is_super == 1) {
                  value.admin_is_super = "是";
                } else {
                  value.admin_is_super = "否";
                }
              });
              this.total = parseInt(res.data.totalCount);
            } else {
              this.$message.error("获取数据失败！");
              // alert(res.msg);
              this.aList = [];
            }
          },
          err => {
            this.$message.error("获取数据失败！");
          }
        );
    },
    // 搜索
    search() {
      //1、获取搜索的内容
      this.currentPage = 1;
      this.searchObj.page = 1;
      //2、获取内容列表
      this.getList();
    },
    // 重置
    reset() {
      //1、清空搜索的内容
      this.searchObj.admin_name = "";
      this.searchObj.depart_id = "";
      this.searchObj.page = 1;
      this.currentPage = 1;
      //2、获取内容列表
      this.getList();
    },
    // 请求集团列表
    getGroupList() {
      this.$http
        .post("/admin/depart/index.php?act=departManage&op=firstDeparts")
        .then(res => {
          if (res.code == 1) {
            this.groupList = res.data;
          }
        });
    },
    //每页数据
    handleCurrentChange: function(val) {
      this.searchObj.page = val;
      this.currentPage = val;
      /*请求数据*/
      this.getList();
    },
    //分组一页多少数据
    handleSizeChange(val) {
      this.currentPage = 1;
      this.searchObj.page = 1;
      this.searchObj.pageSize = val;
      /*请求数据*/
      this.getList();
    },
    // 删除管理员
    deleter(admin_id, depart_id) {
      this.$confirm("确认删除？")
        .then(_ => {
          this.$http
            .post("/admin/auth/index.php?act=adminManage&op=delAdmin", {
              admin_id: admin_id
            })
            .then(
              res => {
                if (res.code == 1) {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "success"
                  });
                  this.searchObj.page = 1;
                  this.currentPage = 1;
                  this.searchObj.admin_name = "";
                  this.searchObj.depart_id = "";
                  this.getList();
                } else {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "error"
                  });
                }
              },
              err => {
                this.$message({
                  showClose: true,
                  message: res.msg,
                  type: "error"
                });
              }
            );
          done();
        })
        .catch(_ => {});
    },
    // 点击编辑中的确定
    editAdmin() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$http
            .post(
              "/admin/auth/index.php?act=adminManage&op=addAdmin",
              this.form
            )
            .then(
              res => {
                if (res.code == 1) {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "success"
                  });
                  this.dialogFormVisible = false;
                  this.getList();
                } else {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "error"
                  });
                }
              },
              err => {
                this.$message.error("获取数据失败！");
              }
            );
        } else {
          return false;
        }
      });
    },
    // 点击编辑
    edit(id, name) {
      this.dialogFormVisible = true;
      this.form.admin_id = id;
      this.form.admin_name = name;
    },
    // 编辑权限确定
    editAdminPermission() {
      // debugger
      this.$confirm("确认修改？")
        .then(_ => {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(255, 255, 255, 0.7)"
          });
          let obj = {
            menus: [],
            admin_id: this.admin_id
          };
          // 深拷贝数组
          obj.menus = JSON.parse(JSON.stringify(this.permissionList));
          // 将true/false 转换为1/0
          obj.menus.map((value, index) => {
            if (value.is_choose) {
              value.is_choose = 1;
            } else {
              value.is_choose = 0;
            }
            if (value.child) {
              value.child.map((val, ind) => {
                if (val.is_choose) {
                  val.is_choose = 1;
                } else {
                  val.is_choose = 0;
                }
                if (val.child) {
                  val.child.map((v, i) => {
                    if (v.is_choose) {
                      v.is_choose = 1;
                    } else {
                      v.is_choose = 0;
                    }
                  });
                }
              });
            }
          });
          this.$http
            .post(
              "/admin/auth/index.php?act=adminManage&op=editAdminMenus",
              obj
            )
            .then(
              res => {
                loading.close();
                this.drawer = false;
                if (res.code == 1) {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "success"
                  });
                } else {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "error"
                  });
                }
              },
              err => {
                this.$message.error("获取数据失败！");
              }
            );
          done();
        })
        .catch(_ => {});
    }
  },
  mounted() {
    //页面刷新就执行
    localStorage.eachNum = "";
    this.getList();
    this.getGroupList();
    this.$nextTick(() => {
      resize(this);
    })
  },
  activated() {
    localStorage.eachNum = "";
    this.getList();
    this.$nextTick(() => {
      this.$refs.table.doLayout(); //解决表格错位
    });
    this.getGroupList();
    resize(this);
  }
};
</script>
<style scoped lang="scss">
.operateBtn {
  // margin-left: 0;
}
.admin-control-edit {
  .el-input {
    width: 60%;
  }
}
.admin_list_check {
  padding: 0 20px;
}
.admin_list_item {
  padding: 0 40px;
}
.admin_list_edit_content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}
</style>